import React, { createContext, useContext, useState, ReactNode } from 'react';

// 定义主题类型
interface Theme {
  background: string;
  color: string;
  border: string;
  buttonBackground: string;
  buttonColor: string;
}

// 定义上下文类型
interface ThemeContextType {
  theme: Theme;
  toggleTheme: () => void;
  isDark: boolean;
}

// 创建主题
const lightTheme: Theme = {
  background: '#ffffff',
  color: '#333333',
  border: '#e0e0e0',
  buttonBackground: '#007bff',
  buttonColor: '#ffffff',
};

const darkTheme: Theme = {
  background: '#1a1a1a',
  color: '#ffffff',
  border: '#333333',
  buttonBackground: '#0056b3',
  buttonColor: '#ffffff',
};

// 创建Context
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// 自定义Hook
export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme必须在ThemeProvider中使用');
  }
  return context;
};

// Provider组件
interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const [isDark, setIsDark] = useState(false);

  const toggleTheme = () => {
    setIsDark(prev => !prev);
  };

  const theme = isDark ? darkTheme : lightTheme;

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme, isDark }}>
      {children}
    </ThemeContext.Provider>
  );
};